18. CSS Grid: Advanced Concepts

I. Grid-template-areas

Explanation: Grid areas ko naam dene ke liye grid-template-areas use hota hai. Ye layout ko samajhne me easy banata hai.

<style> .grid-container { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-columns: 150px 1fr; gap: 10px; background: #fff3e0; padding: 10px; } .header { grid-area: header; background: #ffa726; padding: 10px; } .sidebar { grid-area: sidebar; background: #ffcc80; padding: 10px; } .content { grid-area: content; background: #ffe0b2; padding: 10px; } .footer { grid-area: footer; background: #ffb74d; padding: 10px; } </style> <div class="grid-container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content">Main Content</div> <div class="footer">Footer</div> </div> Run Code

II. Aligning Grid Items

Explanation: Grid items ko center ya kisi bhi direction me align karne ke liye align-items aur justify-items use hote hain.

<style> .grid { display: grid; place-items: center; height: 200px; background: #e1bee7; } .item { width: 100px; height: 100px; background: #8e24aa; color: white; display: flex; justify-content: center; align-items: center; } </style> <div class="grid"> <div class="item">Center</div> </div> Run Code

III. Auto-Placement

Explanation: Jab aap grid me items place karte ho bina kisi row/column specify kiye, to Grid auto-placement ka use karta hai.

<style> .auto-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: #f3e5f5; gap: 10px; } .box { background: #ab47bc; color: white; padding: 20px; text-align: center; } </style> <div class="auto-grid"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> </div> Run Code

IV. Grid Gaps

Explanation: Rows aur columns ke beech spacing ke liye gap property ka use hota hai.

<style> .gap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: #fce4ec; } .item { background: #ec407a; color: white; padding: 20px; text-align: center; } </style> <div class="gap-grid"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div> Run Code